<template>
  <div class="register">
    <topback></topback>
    <header class="register-header">
      <img src="../../assets/MBE.png" alt="" />
    </header>
    <section>
      <h3>注册</h3>
      <p>输入您的手机号码或邮箱和密码</p>
      <p>注册您的账号</p>
    </section>
    <section>
      <!-- vant组件 -->
      <van-form>
        <van-field
          v-model="userName"
          name="user"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '' }]"
        />
        <van-field
          v-model="phone"
          name="user"
          label="手机号"
          placeholder="手机号码"
          :rules="[{ required: true, message: '' }]"
        />
        <van-field
          v-model="passWord"
          type="password"
          name="passWord"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '' }]"
        />
        <van-field
          v-model="passWord2"
          type="password"
          name="passWord"
          label="确认密码"
          placeholder="确认密码"
          :rules="[{ required: true, message: '' }]"
        />
        <van-field
          v-model="email"
          name="user"
          label="邮箱"
          placeholder="邮箱"
          :rules="[{ required: true, message: '' }]"
        />
        <van-field
          v-model="sms"
          center
          clearable
          label="邮箱验证码"
          placeholder="请输入邮箱验证码"
        >
          <template #button>
            <van-button @click.self="sendEmail" size="small" type="primary">{{
              isSend == true ? "发送验证码" : "已发送验证码"
            }}</van-button>
          </template>
        </van-field>

        <div style="margin: 16px; text-align: center">
          <van-button
            @click="onSubmit"
            block
            type="primary"
            native-type="submit"
            >注册</van-button
          >
        </div>
      </van-form>
    </section>

    <footer class="register-footer">
      <p>
        已有账号?
        <router-link to="/login">马上登陆</router-link>
      </p>
    </footer>
  </div>
</template>
    
  <script>
import topback from "@/components/topback.vue";
let rep_phone = /^1[3-9]\d{9}$/;
let rep_email =
  /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
// 局部组件
import Vue from "vue";
import { Dialog } from "vant";
// 引入已经封装的http函数
import { registerFunc, sendEmailFunc } from "@/http/api";
import Topback from "@/components/topback.vue";
// 全局注册
Vue.use(Dialog);

export default {
  // 注册弹窗组件
  components: {
    [Dialog.Component.name]: Dialog.Component,
    topback,
    Topback,
  },
  // 当前组件的数据
  data() {
    return {
      user: "",
      phone: "",
      email: "",
      passWord: "",
      passWord2: "",
      checkbox: false,
      sms: "",
      userName: "",
      isSend: true,
    };
  },
  // 编写方法
  methods: {
    //获取当前时间
    getnowtime() {
      var nowdate = new Date();
      var year = nowdate.getFullYear(),
        month =
          nowdate.getMonth() + 1 < 10
            ? "0" + nowdate.getMonth() + 1
            : nowdate.getMonth() + 1,
        date =
          nowdate.getDate() < 10 ? "0" + nowdate.getDate() : nowdate.getDate(),
        day = nowdate.getDay(),
        h =
          nowdate.getHours() < 10
            ? "0" + nowdate.getHours()
            : nowdate.getHours(),
        m =
          nowdate.getMinutes() < 10
            ? "0" + nowdate.getMinutes()
            : nowdate.getMinutes(),
        s =
          nowdate.getSeconds() < 10
            ? "0" + nowdate.getSeconds()
            : nowdate.getSeconds();

      return (
        year + "." + month + "." + date + "." + " " + h + ":" + m + ":" + s
      );
    },
    // 请求服务器处理
    onSubmit() {
      console.log(this.getnowtime());
      //242234234@qq.com
      //11111
      // 执行注册的函数
      if (this.passWord != this.passWord2) {
        Dialog({ message: "两次输入密码不一致" });
        return;
      }
      // this.register(this.user,this.passWord, this.sms,this.userName)//含邮箱验证
      this.register(
        this.phone,
        this.email,
        this.passWord,
        this.userName,
        this.getnowtime()
      );
    },
    // 注册
    register(phone, email, passWord, userName, time) {
      if (rep_email.test(email) || rep_phone.test(phone)) {
        // 执行注册的API
        // registerFunc('/user/register',{email: user,passWord,v1,userName})//含邮箱验证
        registerFunc("/user/register", {
          phone,
          email,
          passWord,
          userName,
          time,
        }).then((data) => {
          //  console.log(data);
          if (data.code == 200) {
            Dialog.alert({
              title: "是否跳转登录页",
              message: data.msg,
            }).then(() => {
              // 页面跳转(传递参数)
              this.$router.push({ path: "/login" });
            });
          } else {
            Dialog({ message: data.msg });
          }
        });
      } else {
        Dialog({ message: "输入的账号格式不正确!" });
      }
    },
    // 发送邮箱验证码
    sendEmail() {
      if (rep_email.test(this.user) && this.isSend) {
        sendEmailFunc("/sendEmail", { email: this.user }).then((data) => {
          // 是否发送邮箱验证码成功
          // 服务端反馈的信息
          if (data.code == 200) {
            Dialog({ message: data.msg });
          } else {
            Dialog({ message: data.msg });
          }
          this.isSend = false;
          let d = setTimeout(() => {
            this.isSend = true;
          }, 60 * 1000);
        });
      }
    },
  },
};
</script>
    
    <style lang="scss">
@import "../../static/css/base.scss";
@import "../../static/css/common.scss";

.register {
  font-size: 16px;
  .van-button--block,
  .van-button--small {
    background-color: $bgColor;
    border: 0;
  }
  .register-header {
    text-align: center;
    height: 180px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 150px;
    }
  }
  section {
    padding: $pad;
    h3,
    p {
      text-align: center;
      height: 36px;
      font-size: 14px;
    }
    p {
      color: #999;
    }
  }
  .register-footer {
    color: #333;
    p {
      text-align: center;
      a {
        color: #999;
      }
    }
  }
}
</style>